<template>
  <div class="layout">
    <transition name="el-fade-in-linear">
    <Sider :style="{position: 'fixed', height: '100vh', left: 0, bottom: 0, overflow: 'auto'}">
        <Menu active-name="1" theme="dark" width="auto" class="menuitemClasses" ref="routerMenu">
          <router-link v-for="(item,index) in tabData" :key="item.order" :to="item.path">
          <MenuItem :name="item.order">
            <Icon :type="item.icon"></Icon>
            <span>{{item.title}}</span>
          </MenuItem>
          </router-link>
        </Menu>

    </Sider>
    </transition>
    <Layout :style="{'marginLeft': `${layoutLeft}`}" >
      <Content :style="{padding: '0 16px 16px 0px'}">
        <Breadcrumb :style="{margin: '16px 0'}">
          <BreadcrumbItem>
            <Badge dot>
              <Icon type="ios-notifications-outline" size="26" @click="showMessage"></Icon>
            </Badge>
          </BreadcrumbItem>

            <router-link to="/">
              <div style="float: right">
              <Icon  type="md-arrow-round-back" />Log Out
              </div>
            </router-link>



        </Breadcrumb>


        <Card>
          <message-center ref="messageCenterModal"/>
          <div style="background:#eee;">
            <router-view></router-view>

          </div>
        </Card>
      </Content>
    </Layout>
  </div>
</template>

<script>
import MessageCenter from "@/views/League/components/messageCenter/messageCenter";
export default {
  name: "Console",
  components: {MessageCenter},
  data(){
    return{
      tabLoading:false,
      activeTab:1,
      layoutLeft:'200px',
      isShow:false,
      tabData:[
        {
          order:"1",
          icon:"ios-navigate",
          title:"基本信息",
          path:"/league/basicInfo",
        },
        {
          order:"2",
          icon:"ios-navigate",
          title:"碳信用",
          path:"/league/carbonCredits",
        },
        {
          order:"3",
          icon:"ios-navigate",
          title:"联盟信息",
          path:"/league/leagueInfo",
        }
      ]
    }
  },
  created() {
  },
  watch:{
    "tabLoading":function (val) {
      console.log(val)
      this.activeTab ="1"
    }
  },
  mounted() {
    setTimeout(()=>{
      this.tabLoading=true
    },1000)
  },
  methods:{
    showMessage(){
      this.$nextTick(()=>{
        this.$refs.messageCenterModal.messageModal = true

      })
    },
    specialFunction(val){
      if(val===1){
        let str={
          order:"4",
          icon:"ios-navigate",
          title:"配置设置",
          path:"/league/managerFunction",
        }
        this.tabData.push(str)
      }
    }
  }
}
</script>

<style scoped lang="less">
.layout{
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-header-bar{
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

li.router-link-active{
  background-color: #2d8cf0;
  color: white;
}
.routerNav li:hover{
  color: white;
  cursor:pointer
}
</style>
